<template>
    <!--管理员--添加新成员-->
  <div>
    <div style="margin: 5px 15px;">
      <span style="font-size: 19px;">添加新成员</span>
    </div>
    <hr><br>
    <div class="my_content">
      <div>
        <!--表头-->
        <div class="tableTop">
          <ul class="top" style="width: 1500px;">
            <li>
              <span class="navTop">工号</span>
              <span class="navTop">密码</span>
			  <span class="navTop">性别</span>
              <span class="navTop">电话</span>
              <span class="navTop">姓名</span>
			  <span class="navTop">年龄</span>
              <span class="navTop">入职时间(例：2019-12-05)</span>
            </li>
            <li v-for="(d,index) in doctors" :key="index">
              <div>
                <input class="myinput" placeholder="工号" v-model="d.username"/><!-- 工号 -->
                <input class="myinput" placeholder="密码" v-model="d.password"/><!-- 密码 -->
				<div style="display: inline-block;padding: 5px 60px;">
					<input type="radio" name="radios" value="0" v-model="d.gender"><label>男</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="radio" name="radios" value="1" v-model="d.gender"><label>女</label>
				</div>
                <input class="myinput" placeholder="电话" v-model="d.phone"/><!-- 电话 -->
                <input class="myinput" placeholder="姓名" v-model="d.name"/><!-- 名字 -->
				<input class="myinput" placeholder="年龄" v-model="d.age"/><!-- 年龄 -->
                <input class="myinput" placeholder="入职时间(例：2019-12-05)" v-model="d.positionTime"/><!-- 入职时间 -->
					
              </div>
            </li>
          </ul>
        </div>
        <!--输入体-->
      </div>
      <div class="btn">
        <div>
          <Button @click="insertDoctors">提交</Button>
		  <Button @click="delTableOneTr">重置</Button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import api from '../../server/api'
    export default {
        name: "AddMembers",
        template:'<input v-model="${this.doctors[0].password}}"/>{{this.doctors[0].password}}',
        data(){
          return{
            doctors:[
              {username:'',password:'123456',phone:'',name:'',age:'',gender:'',positionTime:'2022-01-01'}
            ]
          }
        },
        mounted(){
          console.log("AddMembers挂载！");
        },
        methods:{
		  delTableOneTr(){
			  this.doctors = [
             {username:'',password:'123456',phone:'',name:'',age:'',gender:'',positionTime:'2022-01-01'}
            ]
		  },
          insertDoctors(){
            let that=this;
			let d = this.doctors;
            let errorDoctor=[];
            let count=0;
            console.log("1.列表的长度："+this.doctors.length);
			console.log("1,doctors: "+this.doctors);
			for (let i=0;i<d.length;i++){
				  if(d[i].username == '' || d[i].password == '' || d[i].name == '' || d[i].phone == '' || d[i].age =='' || d[i].gender == '' || d[i].positionTime == '') {
					  alert("请填写完整信息!!!");
					  return;
				  }
			}
            for (let i=0;i<this.doctors.length;i++){
              that.doctors[i].gender=parseInt(that.doctors[i].gender);  
              axios.post(api.register(that.doctors[i].username,that.doctors[i].password, that.doctors[i].phone, that.doctors[i].name, that.doctors[i].age, that.doctors[i].gender, that.doctors[i].positionTime, ''))
                .then((response)=>{
					console.log("3,是否添加成功: "+response.data)
                  if (response.data==1) {
					  that.$Message.info("添加成功!!!")
					  that.doctors = [{username:'',password:'123456',phone:'',name:'',age:'',gender:'',positionTime:'2022-01-01'}];
                    count++;
                  }else {
                    errorDoctor.push(that.doctors[i]);
					that.$Message.info("添加失败用户已存在!!!")
                  }
                });
            }
          }
        }
    }
</script>

<style scoped>
  .addOneTr{
    width: 65px;
    height: 50px;
    border: 2px dashed #e8e8e8;
    text-align: center;
    padding: 10px 0px;
  }
  .addOneTr:hover{
    border: 2px dashed silver;
  }
  .btn>div{
    display: inline-block;
    margin: 5px 15px;
  }
  .top>li{
    list-style: none;
    /*border: 1px solid blue;*/
    margin: 9px 6px;
  }
  .top>li>.navTop{
    font-size: 14px;
    display: inline-block;
    width: 200px;
    padding: 5px 15px;
    border-bottom: 1px solid silver;
    text-align: center;
  }
  .top>li>div>.myinput{
    width: 200px;
    height: 35px;
  }
</style>
